<template>
  <el-dialog
    title="choose countries"
    :visible.sync="dialogVisible"
    class="countryDialog"
    width="900px"
    @close="closeDialog"
  >
    <!-- 选择区域 -->
    <el-tabs v-model="activeName" type="border-card" @tab-click="countryClick">
      <el-input
        v-model="matchVal"
        class="searchCountry"
        clearable
        placeholder="English Name Search"
        @input="matchCountry"
      />
      <el-tab-pane
        v-for="(it, i) in countryData"
        :key="i"
        :label="continentMap[it.fieldType]"
        :name="String(it.fieldType)"
      >
        <span
          slot="label"
        >{{ continentMap[it.fieldType]
        }}<el-badge
          v-if="it.accord > 0"
          style="margin-left: 10px;"
          :value="it.accord"
        /></span>
        <el-checkbox
          v-show="it.favorites.length > 0"
          v-model="checkAll[i]"
          @change="checkAllChange"
        >check all</el-checkbox>
        <div style="margin: 15px 0;" />
        <el-checkbox-group
          v-model="checkedCountry"
          @change="checkedCountryChange"
        >
          <el-checkbox
            v-for="(item, index) in it.favorites"
            :key="index"
            :label="item.code"
          >{{ item.englishName }}</el-checkbox>
        </el-checkbox-group>
      </el-tab-pane>
    </el-tabs>
    <!-- 已选择 -->
    <el-card v-if="checkedCountry.length" class="box-card">
      <div slot="header" class="clearfix">
        <span>selected</span>
        <el-button
          style="float: right; padding: 3px 7px"
          type="danger"
          @click="empty"
        >empty</el-button>
      </div>
      <el-checkbox-group
        v-model="checkedCountry"
        @change="checkedCountryChange"
      >
        <el-checkbox v-for="item in checkedCountry" :key="item" :label="item">{{
          countryMap[item]
        }}</el-checkbox>
      </el-checkbox-group>
    </el-card>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">Cancel</el-button>
      <el-button
        type="primary"
        @click="submitCheckedCountry"
      >Confirm</el-button>
    </span>
  </el-dialog>
</template>

<script>
import bus from '@/utils/bus';
export default {
  inject: ['checkedCountryRes', 'countryData', 'countryMap'],
  data() {
    return {
      dialogVisible: true,
      activeName: '',
      activeIndex: '0',
      cloneCountryData: JSON.parse(JSON.stringify(this.countryData())),
      countryData: JSON.parse(JSON.stringify(this.countryData())),
      countryMap: JSON.parse(JSON.stringify(this.countryMap())),
      continentMap: {
        '1': 'Asia',
        '2': 'Europe',
        '3': 'Africa',
        '4': 'South America',
        '5': 'North America',
        '6': 'Oceania'
      },
      isIndeterminate: [],
      checkAll: [],
      checkedCountry: JSON.parse(JSON.stringify(this.checkedCountryRes())),
      countryVisible: false,
      matchVal: ''
    };
  },
  mounted() {
    this.activeName = this.countryData[0]['fieldType'];
    if (this.checkedCountry.length) {
      this.checkedCountryChange();
    }
  },
  methods: {
    countryClick(tab, event) {
      this.activeIndex = tab.index;
    },
    isContained(a, b) {
      // 判断a数组是否全部包含b数组
      if (!(a instanceof Array) || !(b instanceof Array)) return false;
      if (a.length < b.length) return false;
      var aStr = a.toString();
      for (var i = 0, len = b.length; i < len; i++) {
        if (aStr.indexOf(b[i]) === -1) return false;
      }
      return true;
    },
    checkedCountryChange() {
      this.countryData.forEach((item, index) => {
        this.$set(
          this.checkAll,
          index,
          this.isContained(this.checkedCountry, item.favorites)
        );
      });
    },
    checkAllChange(val) {
      if (val) {
        this.countryData[this.activeIndex].favorites.forEach((item) => {
          if (!this.checkedCountry.includes(item.code)) {
            this.checkedCountry.push(item.code);
          }
        });
      } else {
        this.countryData[this.activeIndex].favorites.forEach((item) => {
          if (this.checkedCountry.includes(item.code)) {
            this.checkedCountry.splice(
              this.checkedCountry.indexOf(item.code),
              1
            );
          }
        });
      }
    },
    closeDialog() {
      this.$emit('closeChooseCountry');
    },
    submitCheckedCountry() {
      this.closeDialog();
      bus.$emit('checkedCountry', this.checkedCountry);
    },
    splitStr(str) {
      return str.split(',')[1];
    },
    matchCountry(val) {
      this.countryData = JSON.parse(JSON.stringify(this.cloneCountryData));
      if (val) {
        this.countryData.forEach((item) => {
          for (var i = 0; i < item.favorites.length; i++) {
            if (item.favorites[i].englishName.indexOf(val) !== -1) {
              item.accord += 1;
            } else {
              item.favorites.splice(i, 1);
              i--;
            }
          }
        });
      }
    },
    empty() {
      this.checkedCountry = [];
      this.checkedCountryChange();
    }
  }
};
</script>
<style lang="scss" scoped>
.el-tabs--border-card {
  ::v-deep .el-tabs__content {
    overflow: inherit;
    .el-input {
      position: absolute;
      right: 10px;
      top: -36px;
      width: 180px;
    }
  }
}
.box-card {
  margin-top: 20px;
  ::v-deep .el-card__header {
    padding: 13px 15px;
  }
}
.countryDialog {
  .el-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    .el-checkbox {
      width: 25%;
      margin-right: 0;
      margin-bottom: 8px;
    }
  }
}
</style>
